<template>
  <div class="dashboard-container">
    <div class="data-cards card">
      <el-row :gutter="30">
        <el-col :span="8" :offset="0">
          <el-card shadow="hover">
            <div slot="header">
              <p style="padding: 0 0; margin: 0">
                <svg-icon icon-class="user" class-name="user-class" />
                用户统计:总计
                <router-link style="color: blue" :to="{ name: 'Example' }"
                  >({{ baseData.userCount.count }})</router-link
                >
              </p>
            </div>
            <p>今日新增{{ baseData.userCountToday.count }}</p>
          </el-card>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-card shadow="hover">
            <div slot="header">
              <span>图片统计:总计({{ baseData.imgCount.count }})</span>
            </div>
            <p>今日新增{{ baseData.imgCountToday.count }}</p>
          </el-card>
        </el-col>
        <el-col :span="8" :offset="0">
          <el-card shadow="hover">
            <div slot="header">
              <span>新闻统计:总计({{ baseData.newsCount.count }})</span>
            </div>
            <p>今日新增{{ baseData.userCountToday.count }}</p>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="card echarts-container">
      <!-- 图标的容器 -->
      <div id="eacher" />
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import Api from "@/api/login/index";
var echarts = require("echarts");
export default {
  name: "Dashboard",
  data() {
    return {
      baseData: {
        userCount: {
          count: 0,
        },
        userCountToday: {
          count: 0,
        },
        imgCountToday: {
          count: "0",
        },
        imgCount: {
          count: 0,
        },
        newsCount: {
          count: 0,
        },
        userCountByDay: [],
      },
    };
  },

  mounted() {
    this.myChart = echarts.init(document.getElementById("eacher"));
  },
  methods: {
    getBaseData() {
      Api.dashboard().then((res) => {
        this.baseData = res;
        console.log(res);
        this.init();
      });
    },
    init() {
      var xData = [];
      var yData = [];
      for (var i = 0; i < this.baseData.userCountByDay.length; i++) {
        var item = this.baseData.userCountByDay[i];
        xData.push(item.date);
        yData.push(item.count);
      }
     
      var bData = [];
       for (var i = 0; i < this.baseData.imgCountByDay.length; i++) {
        var item = this.baseData.imgCountByDay[i];

        bData.push(item.count);
      }
         var aData = [];
        for (var i = 0; i < this.baseData.newsCountByDay.length; i++) {
        var item = this.baseData.newsCountByDay[i];
   
        aData.push(item.count);
      }
      
      this.myChart.setOption({
       title: {
        text: '堆叠区域图'
    },
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            }
        }
    },
    legend: {
        data: ['用户统计', '图片统计', '新闻统计']
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: xData
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '用户统计',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: yData
        },
        {
            name: '图片统计',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: bData
        },
        {
            name: '新闻统计',
            type: 'line',
            stack: '总量',
            areaStyle: {},
            data: aData
        },
      
      
    ]
      });
    },
  },
  created() {
    this.getBaseData();
  },
};
</script>

<style lang="scss" scoped>
.dashboard-main {
  .card {
    margin: 30px;
  }
}
.dashboard-main {
  .card {
    margin: 30px;
  }
}
#eacher {
  width: 100%;
  height: 700px;
  background-color: pink;
}
</style>